<template>
  <div class="cq-banner">
    <el-carousel height="680px" arrow="never">
      <el-carousel-item v-for="item in bannnerUrls" :key="item._id">
        <div :style="{ height: '680px', background: `#051630 url(${item.carousel}) no-repeat center/cover` }"></div>
      </el-carousel-item>
    </el-carousel>
    <div class="cq-ban-tips w1160 flex flex-center">
      <img src="@/assets/img/logo-tips.png" width="76" height="70" alt="logo" />
      <p>橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持</p>
      <btn-more>了解更多</btn-more>
    </div>
  </div>
</template>

<script>
import BtnMore from './btn-more'
export default {
  name: 'CqBanner',
  components: {
    BtnMore
  },
  data() {
    return {
      bannnerUrls: []
    }
  },
  methods: {
    async getBannerList() {
      const { data } = await this.$req('/indexbanners', 'get')
      console.log('data: ', data)
      this.bannnerUrls = data
    }
  },
  created() {
    this.getBannerList()
  }
}
</script>

<style lang="scss" scoped>
.cq-banner {
  height: 680px;
  position: relative;
  :deep(.el-carousel__indicators--horizontal) {
    bottom: 50px !important;
  }
  /* ::v-deep(.el-carousel__indicators--horizontal) {
    bottom: 200px;
  } */
}

.cq-ban-tips {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10000;
  bottom: -80px;
  padding: 24px 36px;
  background-color: #fff;
  box-shadow: 0 8px 8px #f1f1f1;
  p {
    padding: 0 50px 0 42px;
    font-size: 20px;
    line-height: 70px;
  }
}
</style>
